<template>
   <!-- 抵押产品模块 -->
    <div class="mortgage w clearfix">
        <div class="mortgage_title">
            <ul>
                <a href="javascript:void(0)" @click.prevent="cutDeqing">
                    <li :class="{'active': this.isShow}">德清农商银行</li>
                </a>
                <a href="javascript:void(0)" @click="cutHushang">
                    <li class="last" :class="{'active': this.isShow}">浙江德清湖商村镇银行</li>
                </a>
            </ul>
        </div>
        <div class="mortgage_content clearfix">
            <!-- 各银行模块 -->
            <Deqing v-if="isShow"></Deqing>
            <Hushang v-else></Hushang>
        </div>
         <!-- 客服服务模块 -->
        <div class="serviceperson clearfix">
            <div class="person">
                <div class="free left">免费咨询</div>
                <div class="only right">
                  <img src="../../assets/style/img/service_image/在线咨询.svg" alt="">
                  </div>
            </div>
            <div class="service">
                <div class="number">
                    <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
                </div>
                <div class="message">
                    <i class="icon-wechat"></i>
                    <div class="dh">
                        <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                    </div>
                </div>
                <div class="input_content">
                    <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                    <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                    <button>发送</button>
                </div>
            </div>
        </div>
        <!-- 客服模块end -->
    </div>

</template>

<script>
import Deqing from './Deqing.vue'
import Hushang from './Hushang.vue'

export default {
  name:'Mortgage',
  components:{
    Deqing,
    Hushang
  },
  data() {
    return {
      isShow:true
    }
  },
  methods: {
    cutDeqing(){
      this.isShow = true
    },
    cutHushang(){
      this.isShow = false
    }
  },
}
</script>

<style lang='less' scoped>
.active{
 		background: #ee384a;
		color: #fff;
}

.mortgage {
    position: relative;
    padding-top: 10px;
    padding-bottom: 20px;
    .mortgage_title{
			margin-bottom: 20px;
			height: 50px;
			font-size: 16px;
			color: #333333;
			ul{
				float: left;
				overflow: hidden;
				height: 50px;
				border: 1px solid #666666;
				border-radius: 8px;
				// background: pink;
				li{
					background: #ee384a;
					color: #fff;
					float: left;
					padding: 12px 16px;
					text-align: center;
					border-radius: 8px;
					margin-right: 5px;
				}
      
				.last{
          margin-right: 0;
					// background: #fff;
					// color: #333333;
				}
			}
    }
}

// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 500px;
  right: -370px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>